<template>
  <div>
    <div class="films-header">
      <van-nav-bar v-show="showTar" size="17" title="电影">
        <template #left>
          <span  @click="electCity">
            {{ $store.state.cityName }}
            <van-icon name="arrow-down" size="12" color="#191a1b" />
          </span>
        </template>
      </van-nav-bar>
      <van-tabs color="#ff5f16" title-active-color="#ff5f16" @click="onClick" v-model="active">
        <van-tab title="正在热映" name="/films/nowPlaying"></van-tab>
        <van-tab title="即将上映" name="/films/commingSoon"></van-tab>
      </van-tabs>
    </div>
    <router-view class="film-body"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTar: false,
      active: localStorage.getItem('activeName') || '/films/nowPlaying'
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handlerScroll);
  },
  methods: {
    electCity() {
      this.$router.push("/city");
    },
    onClick(name) {
      localStorage.setItem('activeName', name)
      this.$router.push(name);
    },
    handlerScroll() {
      this.showTar = window.pageYOffset > 300;
    },
  },
};
</script>

<style scoped>
.show-tar {
  background: #fff;
  border-bottom: 1px solid #ededed;
}
.films-header {
  width: 100%;
  position: fixed;
  border-bottom: 1px solid #ededed;
  z-index: 99;
}
.film-body {
  padding: 50px 0;
}
</style>